<!--  -->
<template>
  <div class="backend-design-header noselect">
    <div class="left dffr">
      <div class="logo dfac">
        <img :src="logo" alt="" height="34" title="" />
      </div>
      <MenuN />
    </div>
    <div class="middle">
      <DeviceToolbarN />
    </div>
    <div class="right">
      <PublishN />
      <ViewButtonN />
      <SiteDropdownN />
    </div>
  </div>
</template>

<script>
import logo from '@/assets/logo1.png'
import MenuN from '@/components/header/backendHeader/backenddesignheader/MenuN.vue'
import PublishN from '@/components/header/backendHeader/backenddesignheader/PublishN.vue'
import ViewButtonN from '@/components/header/backendHeader/backenddesignheader/ViewButtonN.vue'
import DeviceToolbarN from '@/components/header/backendHeader/backenddesignheader/DeviceToolbarN.vue'
import SiteDropdownN from '@/components/header/backendHeader/backenddesignheader/SiteDropdownN.vue'
import * as functions from '@/core/functions.js'
export default {
  created () {
    functions.agentInfo().then(agent => {
      if (parseInt(agent.loginAgentDomain) === 1) {
        this.logo = agent.designLogoImgSrc
      } else {
        this.logo = logo
      }
    })
  },
  data () {
    return {
      logo: ''
    }
  },
  components: {
    MenuN,
    PublishN,
    ViewButtonN,
    DeviceToolbarN,
    SiteDropdownN
  }
}

</script>

<style scoped>
.backend-design-header {
  background-color: #fff;
  border-bottom: 1px solid #E0E3E7;
  z-index: 99;
  height: 48px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
}
.backend-design-header .logo {
  padding: 0 15px;
}
.backend-design-header .right {
  display: flex;
  flex-flow: row-reverse;
  align-items: center;
  padding-right: 20px;
}
</style>
